老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧,其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式,只是有些概念頗雷同我就沒特別算進去了,像是鐵人賽第28天的「左圖右文版面,文字垂直置中的方式?」裡面就有利用圖片自身高度來達到垂直置中的效果。至於未來會不會繼續生出更多的垂直置中技巧呢? 雖然我認為25個垂直置中技巧已經到頂了,但當初我寫出15個垂直置中技巧時,我也是認為到頂了XDDDD,後面卻硬生生的寫出了 25種方式,真的超自虐的(笑)。
最後一篇了,這篇我不想寫CSS垂直置中了,如果真的要講還有沒有其他的垂直置中技巧,大概就是 JavaScript 了,以往 Amos 有時候也會利用 JavaScript 或者是 JQuery 來做垂直置中,但就是要看稿件需求就是了,所以這最後一天我們就用 JQuery 來做垂直置中吧! 首先先來看一下原始碼
<div class="wrap">
<div class="text">
<h3>Amos & CSS coke</h3>
<p>
垂直置中寫了30種也太神經了一點,不過寫完的爽度實在超高阿,
請叫我垂直置中王啦! 哇哈哈哈哈哈哈(被打)
</p>
</div>
</div>
.wrap{
height: 500px;
border:1px solid #aaa;
}
.text{
background-color: #ccc;
width: 500px;
margin: auto;
padding: 30px;
line-height: 1.5;
}
let _wrap_Hi = $('.wrap').height();
let _text_Hi = $('.text').outerHeight();
let _mt = (_wrap_Hi - _text_Hi) / 2;
$('.text').css({'margin-top': _mt});
上面的寫法其實很簡單,就把先把父層的空間抓到,接著再抓子層的高度,兩者相減之後再除2,這樣就得到了一半的父層剩餘空間,接著我們把他設定到子層的margin-top
去就搞定啦,就是很簡單的加減乘除計算囉,大家也去試試看吧。
Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS可樂部落格
CSS coke的Youtube直播頻道
快按此訂閱CSS coke的頻道
阿木!!我完成鐵人賽啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦